<template>
  <div class="cate">
    <Table
      @get="getCateList"
      @add="addNewCate"
      @deletec="deleteCat"
      :res="cate"
      :dialogFormVisible="dialogFormVisible"
    ></Table>
  </div>
</template>

<script>
// 从 vuex 中按需导入 辅助函数
import { mapActions, mapState } from 'vuex'
// 导入 表格组件
import Table from '@/components/Table.vue'
export default {
  name: 'Cate',
  components: {
    Table
  },
  data() {
    return {
      // 当前页数
      currentPage4: 1,
      // 一页显示的条数
      pagesize: 5,
      // 对话框是否显示
      dialogFormVisible: false,
      // 阀门，初始状态：开
      flag: true
    }
  },
  computed: {
    ...mapState('cate', ['cate'])
  },
  methods: {
    // 将 cate 小仓库的一步方法映射为当前组件的方法
    ...mapActions('cate', ['getCateList', 'addCate', 'deleteCate']),
    // 新增分类
    async addNewCate(form) {
      try {
        await this.addCate(form)
        this.$message.success('success')
        this.getCateList({
          curpage: this.currentPage4,
          pagesize: this.pagesize
        })
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    // 删除分类
    async deleteCat(id) {
      const that = this
      // 如果阀门是打开的，进入if判断语句体
      if (this.flag) {
        // 进入判断体后关闭阀门
        this.flag = false
        this.$confirm('是否删除此分类', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          async callback(actions) {
            if (actions !== 'confirm') return that.$message.warning('已取消删除')
            // 发送请求
            try {
              await that.deleteCate(id)
              that.$message.success('success')
              that.getCateList({
                curpage: that.currentPage4,
                pagesize: that.pagesize
              })
            } catch (err) {
              that.$message.error(err.message)
            }
          }
        })
        // 等定时器执行完毕再将阀门打开
        setTimeout(() => {
          // 定时器执行完毕后，打开阀门
          this.flag = true
        }, 2000)
      }
    }
  },
  // 组件创建完毕，data、props、methods处于可用状态，页面为挂载到浏览器
  created() {
    this.getCateList({ curpage: this.currentPage4, pagesize: this.pagesize })
  }
}
</script>

<style lang="less" scoped>
.cate {
  position: relative;
  padding: 0 20px;
  .mt {
    float: right;
    margin-top: 20px;
  }
  .btn {
    margin-top: 20px;
  }
}
</style>
